<template>
  <div class="sub-tabs-container">
    <div class="sub-tabs">
      <button
        v-for="tab in tabs"                  
        :key="tab"
        @click="$emit('subTabChanged', tab)"
        :class="{ active: tab === props.currentTab }"
      >
        {{ tab }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  tabs: Array,
  currentTab: String // 接收父组件传递的当前选中标签
})


</script>

<style scoped>
/* 原有样式保持不变 */
.sub-tabs-container {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: #f8f9fa;
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.sub-tabs {
  display: flex;
  gap: 10px;
}

.sub-tabs button {
  padding: 8px 16px;
  background: #e9ecef;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.sub-tabs button:hover {
  background: #dee2e6;
}

.sub-tabs button.active {
  background: #42b983;
  color: white;
}
</style>